<template>
  <div class="app-content">
    <dk-table ref="DkTableRef" table-api="/gs_gold/admin.config" :cache-table="!getDev()"> </dk-table>
    <!--    DIY组件-->
    <dk-dialog v-model="showDiy" title="页面DIY" width="1400px" top="5vh" :z-index="100" lock-scroll destroy-on-close @opened="onOpened">
      <dk-page-diy
        ref="diy"
        :loading="loading"
        right-aside-width="330px"
        left-aside-width="300px"
        type="min"
        style="height: 810px; overflow: hidden"
      >
        <el-button type="primary" @click="save()">保存</el-button>
        <el-button type="danger" @click="diy.clear()">清除</el-button>
        <el-button type="warning" @click="diy.showDiyCloud('custom_page')">模板中心</el-button>
      </dk-page-diy>
    </dk-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getDev } from '@/utils/auth'
import { setValueById } from '@/api/config'
import rules from '@/diy/rules'

defineOptions({
  name: 'CustomPageList'
})
const diy = ref()
const loading = ref(true)
const showDiy = ref(false)
const chooseItem: any = ref({})
const DkTableRef = ref()
const save = () => {
  const diyData = diy.value.get()
  setValueById(chooseItem.value.id, diyData).then((res) => {
    console.log(res)
  })
}

onMounted(() => {
  DkTableRef.value.DkTable.onClickButton((event: string, data: any) => {
    if (event === 'diy') {
      // 弹出diy
      chooseItem.value = data.row
      showDiy.value = true
    }
  })
})

const onOpened = () => {
  for (const menu of [rules.common, rules.search, rules.app, rules.my]) {
    diy.value.addMenu(menu)
    diy.value.addComponent(menu.list)
  }
  diy.value?.set(chooseItem.value.value)
  loading.value = false
}
</script>
<style>
.dk-page-diy ._fc-l.item-box ._fc-l-groups {
  height: calc(100vh - 250px);
}
</style>
